<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no">
    <title></title>
    <link rel="stylesheet" href="resources/punchClock/css/public.css"/>
    <link rel="stylesheet" href="resources/punchClock/css/signin.css"/>
    <link rel="stylesheet" href="resources/layui/css/layui.css">
    <script src="resources/layui/layui.js"></script>
    <script src="resources/jquery.min.js"></script>
</head>

<body>
<div class="top flex flex-align-end flex-pack-center flex-warp layui-bg-green">
    <div style="margin:35px;">
        <div id="txt" style="font-size:16px;margin-left:10px;"></div>
        <div id="txt1" style="margin:15px;margin-left:40px;font-size:20px;"></div>
        <div id="txt2" style="font-size:35px;">
        </div>
    </div>

    <div class="out-1 flex flex-align-center flex-pack-center" id="signIn" style="margin-left:180px;margin-top:30px;">
        <div class="out-2 flex flex-align-center flex-pack-center">
            <div class="signBtn">
                <strong id="signin-txt" style="color:#009688;">未签到</strong>
                <span style="color:#009688;">已签到<em id="signin-count">0</em>天</span>
            </div>
        </div>
    </div>

    <div class="out-1 flex flex-align-center flex-pack-center" id="signOut" style="margin-left:-50px;margin-top:30px;">
        <div class="out-2 flex flex-align-center flex-pack-center">
            <div class="signBtn">
                <strong id="signout-txt" style="color:#009688;">未签退</strong>
                <div id="signout-txt1" style="color:#009688;margin-left:28px;margin-top:10px;">未签退</div>
                <!--  <span style="color:#009688;">已签退<em id="signout-count">0</em>天</span> -->
            </div>
        </div>
    </div>
    <div style="margin-top:55px;float:right;">
        <div style="margin-right:60px;font-size:15px;width:260px;">签到时间：<span id="qdtime"></span></div>
        <div style="margin-right:60px;margin-top:15px;font-size:15px;;width:260px;">签退时间：<span id="qttime">未签退</span>
        </div>
    </div>
</div>
<div class="Calendar">
    <div id="toyear" class="flex flex-pack-center">
        <div id="idCalendarPre">&lt;&lt;</div>
        <div class="year-month">
            <span id="idCalendarYear">2020</span>年<span id="idCalendarMonth">6</span>月
        </div>
        <div id="idCalendarNext" style="cursor:hand;">&gt;&gt;</div>
    </div>
    <table border="1px" cellpadding="0" cellspacing="0">
        <thead>
        <tr class="tou">
            <td>日</td>
            <td>一</td>
            <td>二</td>
            <td>三</td>
            <td>四</td>
            <td>五</td>
            <td>六</td>
        </tr>
        </thead>
        <tbody id="idCalendar">
        </tbody>
    </table>
</div>
<script type="text/javascript" src="resources/punchClock/js/rili.js"></script>

<script language="JavaScript">
    layui.use(['jquery', 'layer'],
        function () {
            var $ = layui.$;
            var layer = layui.layer;
        });
    window.onload = function () {
        nowTime();
        Ajax1();
        Ajax3();
    }

    //查看是否签到的请求
    function Ajax1() {
        $.ajax({
            url: 'sign/if_punchIn',
            method: 'get',
            dataType: 'json',
            success: function (data) {
                var time = data.now_time;
                var ps = data.ps;
                $("#qdtime").text(time + "  ( " + ps + " ) ");
                Ajax2(time);
            }
        });
    }

    //查看是否签退的请求
    function Ajax3() {
        $.ajax({
            url: 'sign/if_punchOut',
            method: 'get',
            dataType: 'json',
            success: function (data) {
                var time = data.out_time;
                var waring = data.ps;
                if (waring == "正常") {
                    $$("signout-txt").innerHTML = '已签退';
                    $$("signout-txt1").innerHTML = '已签退';
                }
                $("#qttime").text(time + "  ( " + waring + " ) ");
                Ajax4(time);
            }
        });
    }

    //添加今天签退
    function Ajax4(time) {
        $.ajax({
            url: 'sign/all_punchout',
            method: 'get',
            dataType: 'json',
            success: function (data) {
                var isSignqt = true;
                if (time == '未签退') {
                    isSignqt = false;
                }
                //添加今天签到
                $$("signOut").onclick = function () {
                    if (isSignqt == false) {
                        $.ajax({
                            url: 'sign/out_time.do',
                            method: 'post',
                            dataType: 'json',
                            success: function (data) {
                                var time = data.out_time;
                                var result = data.result;
                                if (result == -1) {
                                    layer.msg('未正常签到，不能进行签退');
                                } else if (result == -2) {
                                    layer.msg('未到签退时间');
                                } else {
                                    $("#qttime").text(time + "  ( 正常  ) ");
                                    $$("signout-txt").innerHTML = '已签退';
                                    $$("signout-txt1").innerHTML = '已签退';
                                    layer.msg('签退成功');
                                }
                            }
                        });
                    } else {
                        layer.msg('今日已经签退');
                    }
                }
            }
        });
    }

    //遍历签到日期，并进行签到操作
    function Ajax2(time) {
        $.ajax({
            url: 'sign/all_punchin',
            method: 'get',
            dataType: 'json',
            success: function (data) {
                var isSign = true;
                if (time == '未签到') {
                    isSign = false;
                }
                var myday = new Array; //已签到的数组
                var data = data.mydate;
                var Syear;
                var Smonth;
                for (var i = 0; i < data.length; i++) {
                    myday[i] = data[i];
                }
                onCalendar(myday, isSign);
            }
        });
    }

    function onCalendar(myday, isSign) {
        var cale = new Calendar("idCalendar", {
            qdDay: myday,
            onToday: function (o) {
                o.className = "onToday";
            },
            onSignIn: function () {
                $$("signin-txt").innerHTML = '已签到';
            },
            onFinish: function () {
                Syear = this.Year;
                Smonth = this.Month;
                var count = 0;
                for (var i = 0; i < myday.length; i++) {
                    if (getMyDate(parseInt(myday[i]), Syear, Smonth))
                        count++;
                }
                $$("signin-count").innerHTML = count;//已签到次数
                $$("idCalendarYear").innerHTML = this.Year;  //表头年份
                $$("idCalendarMonth").innerHTML = this.Month; //表头月份
            }
        });

        $$("idCalendarPre").onclick = function () {
            cale.PreMonth();
        }

        $$("idCalendarNext").onclick = function () {
            cale.NextMonth();
        }
        //添加今天签到
        $$("signIn").onclick = function () {
            console.log(isSign);
            var date = new Date();
            if (date.getDay() == 0 || date.getDay() == 6){
                layer.msg('周六日不用签到，如需要，请申请加班');
            }else {
                if (isSign == false) {
                    $.ajax({
                        url: 'sign/in_time.do',
                        method: 'post',
                        dataType: 'json',
                        success: function (data) {
                            console.log(data);
                            var time = data.now_time;
                            var ps = data.ps;
                            console.log(ps);
                            $("#qdtime").text(time + "  ( " + ps + " ) ");
                            if (ps == "缺勤") {
                                layer.msg("已超出签到时间范围，按缺勤处理！");
                            } else {
                                layer.msg('签到成功');
                            }
                        }
                    });
                    var res = cale.SignIn();
                    //console.log(myday[myday.length-1]*1000);
                    if (res == '1') {
                        console.log("1");
                        $$("signin-txt").innerHTML = '已签到';
                        $$("signin-count").innerHTML = parseInt($$("signin-count").innerHTML) + 1;
                        isSign = true;
                    } else if (res == '2') {
                        console.log("2");
                        $$("signin-txt").innerHTML = '已签到';
                        layer.msg('今日已经签到')
                    }
                } else {
                    layer.msg('今日已经签到');
                }
            }
        }
    }

    function checktime() {
        var date = new Date()
        var h = date.getHours()    //时
        var m = date.getMinutes()  //分
        var s = date.getSeconds()  //秒
    }

    //判断获得的数据是否为同一月，如果是，则返回true
    function getMyDate(str, Syear, Smonth) {
        var date = new Date(str * 1000);
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        if (year == Syear && month == Smonth) {
            return true;
        } else {
            return false;
        }
    }

    //获取当前日期时间
    function nowTime() {      //获取当前时间的函数
        var date = new Date()
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate();
        var dayy = date.getDay();
        var h = date.getHours()    //时
        var m = date.getMinutes()  //分
        var s = date.getSeconds()  //秒
        dayy = toDay(dayy)
        month = checkTime(month)
        day = checkTime(day)
        h = checkTime(h)
        m = checkTime(m)
        s = checkTime(s)
        var txt = document.getElementById('txt').innerHTML = year + "年 " + month + "月" + day + "日 ";
        var txt1 = document.getElementById('txt1').innerHTML = "   周    " + dayy;
        var txt2 = document.getElementById('txt2').innerHTML = h + ":" + m + ":" + s;
        t = setTimeout('nowTime()', 500)  //每隔500就触发一次函数
    }

    function checkTime(i) {   //检查分和秒，如果小于10，则在数字前加上0
        if (i < 10) {
            i = "0" + i
        }
        return i
    }

    function toDay(dayy) {
        if (dayy == 0)
            dayy = "日";
        else if (dayy == 1)
            dayy = "一";
        else if (dayy == 2)
            dayy = "二";
        else if (dayy == 3)
            dayy = "三";
        else if (dayy == 4)
            dayy = "四";
        else if (dayy == 5)
            dayy = "五";
        else
            dayy = "六";
        return dayy;
    }
</script>
</body>
</html>